<template>
	 <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100vh;"  @scrolltoupper="onScrollTop">
		<view class="container">
			<uni-list v-for="(item,index) in chatList">
				<uni-list  :border="true">
					<uni-swipe-action>
						<uni-swipe-action-item :right-options="options"  @click="onClick" @change="change" style="border: none;border-bottom: 1px solid whitesmoke;">
								<view>
									<uni-list-chat clickable="true" link :to="'/pages/message/detail?shopId='+item.shopId"  :avatar-circle="true" 
									 :title="item.shopName" :avatar="baseUrl+item.shopCover"
									:note="item.lastMsg" 
									:time="formatTimestamp(item.createTime)" badge-positon="left" :badge-text="item.noRead ? 'dot':''">
									</uni-list-chat>
								</view>
						</uni-swipe-action-item>
					</uni-swipe-action>	
					
					
				</uni-list>
			</uni-list>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import {getChatShop,noReadCount} from '@/api/chat.ts'
	import { baseUrl } from '@/api/request'
	import {ref,watchEffect} from 'vue'
	import {formatTimestamp} from '@/utils/date.ts'
	const options = ref(
		[{
			text: '删除',
			style: {
				fontSize:'13px',
				backgroundColor: '#dd524d'
			}
		}]
	)
	const onClick=(e)=> {
		console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
	}
	const change=(event)=> {
		console.log('改变事件', event);
	}
	const swipeChange=(e, index)=> {
		console.log('当前状态：' + e + '，下标：' + index)
	}
	const onScroll =(e)=> {
	  console.log('滚动到底部了');
	  if(chatList.value.length < total.value && total.value > 0){
		  queryParams.value.page++;
		  getList()
	  }
	}
	const onScrollTop =(e)=> {
	  console.log('滚动到顶部了');
	  queryParams.value.page=1;
	  getList()
	}
	const chatList=ref([
	])
	const queryParams=ref({
		page:1,
		limit:10
	})
	const total=ref()
	const 	getList=()=>{
		getChatShop(queryParams.value).then(res=>{
			if(queryParams.value.page ==1){
				chatList.value=res.data.list
			}else{
				chatList.value=chatList.value.concat(res.data.list) 
			}
			total.value=res.data.total
		})
	}
	const noReadNum = ref(0)
	const getnoReadCount=()=>{
		noReadCount().then(res=>{
			noReadNum.value=res.data
			if(noReadNum.value > 0){
				uni.showTabBarRedDot({
					index:3
				})
			}else{
				uni.removeTabBarBadge({
					index:3
				})
			}
		})
	}
	onLoad(()=>{
		getList()
		getnoReadCount()
	})
	onShow(()=>{
		queryParams.value.page=1
		getList()
		getnoReadCount()
	})
	watchEffect(()=>{
		queryParams.value.page=1
		getList()
		getnoReadCount()
	})
</script>

<style lang="scss" >

</style>